.fz {
  &-w {
    font-weight: bold;
  }

  &-14 {
    @include fontSize(14)
  }

  &-16 {
    @include fontSize(16)
  }

  &-20 {
    @include fontSize(20)
  }
}

.bd {
  border: 1px solid #ddd;

  &-t {
    border-top: 1px solid #ddd;
  }

  &-b {
    border-bottom: 1px solid #ddd;
  }

  &-l {
    border-left: 1px solid #ddd;
  }

  &-r {
    border-right: 1px solid #ddd;
  }
}


.mg5 {
  @include mg(5px)
}

.mg10 {
  @include mg(10px)
}

.mg20 {
  @include mg(20px)
}

.pd5 {
  @include pd(5px)
}

.pd10 {
  @include pd(10px)
}

.pd20 {
  @include pd(20px)
}

.lighter {
  color: tint($color, 20%);

  &-2 {
    color: tint($color, 40%)
  }

  &-3 {
    color: tint($color, 60%)
  }

  &-4 {
    color: tint($color, 80%)
  }
}

.darker {
  color: shade($color, 20%);

  &-2 {
    color: shade($color, 40%)
  }

  &-3 {
    color: shade($color, 60%)
  }

  &-4 {
    color: shade($color, 80%)
  }
}